<template>
    <div class="home">
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- 这部分放你要渲染的那些内容 -->
            <swiper-slide v-for="item in model" :key="item.id">
                <ul>
                    <li>
                        <img class='banner' v-bind:src="item.imgUrl">
                    </li>
    
                </ul>
    
            </swiper-slide>
            <!-- 这是轮播的小圆点 -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    
        <div>
            <router-link to="form">
                <button>表单</button>
            </router-link>
        </div>
        <div>
            <router-link to="File">
                <button>客户档案</button>
            </router-link>
        </div>
    </div>
</template>
  
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    components: {
        swiper,
        swiperSlide
    },
    name: 'home',
    data() {
        return {
            swiperOption: {
                notNextTick: true,
                autoplay: 2000,
                grabCursor: true,
                setWrapperSize: true,
                pagination: '.swiper-pagination',
                observeParents: true,

            },

            model: [
                { imgUrl: './../../static/img/banner.png' },
                { imgUrl: './../../static/img/banner.png' },
                { imgUrl: './../../static/img/banner.png' },
                { imgUrl: './../../static/img/banner.png' },

            ]
        }
    },
    computed: {


    },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
    width: 100%;
    margin: 0;
    padding: 0;
}

.home img {
    width: 100%;
}

.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 10px;
    left: 33%;
    width: 100%;
}
</style>
